<template>
  <el-card class="app-container">
    <div v-if="!isEdit">
      <div class="itemTitle">页面标题</div>
      <div class="search">
        <el-form :inline="true" :model="queryParams">
          <el-row>
            <el-col :span="5">
              <el-form-item label="审批人" props="user">
                <el-input v-model="queryParams.user" placeholder="审批人" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="创建时间" props="dateRange">
                <el-date-picker
                  v-model="queryParams.dateRange"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态" props="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="字典状态"
                  clearable
                >
                  <el-option
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="审批人审批人审批人" props="user">
                <el-input v-model="queryParams.user" placeholder="审批人" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="审批人" props="user">
                <el-input v-model="queryParams.user" placeholder="审批人" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="content">
        <div class="ct-btns">
          <el-button type="primary" @click="handleAdd">页面新增</el-button>
          <el-button type="primary" @click="handleAddByDialog">弹窗新增</el-button>
          <el-button type="danger">批量删除</el-button>
          <el-button type="success">批量导入</el-button>
          <el-button type="warning">批量导出</el-button>
        </div>
        <div class="ct-table">
          <elTables 
            :table-data="tableData" 
            :columns="tableColumns" 
            :handle-current-change="handleCurrentChange"
            isPagin
            :curHeight="tableHeight"
          />
        </div>
      </div>
    </div>
    <el-dialog title="新增特殊作业" :visible.sync="dialogFormVisible">
      <div class="dialog-form">
        <p class="title-level2">基本信息</p>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-row>
            <el-col :span="item.span" v-for="(item, index) in formList" :key="index">
              <!-- input -->
              <el-form-item v-if="item.type == 'input'" :label="item.label" :prop="item.prop">
                <el-input 
                  :maxlength="50" 
                  style="width: 100%" 
                  v-model="form[item.prop]"
                  :placeholder="'请输入' + item.label"
                />
              </el-form-item>
              <!-- select -->
              <el-form-item 
                v-if="item.type == 'select'"
                style="width: 100%" 
                :label="item.label" 
                :prop="item.prop">
                <el-select 
                  v-model="form[item.prop]" 
                  :placeholder="'请选择' + item.label"
                  @change="(val) => handleSelChange(val, item)"
                  >
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <!-- select-tree -->
              <el-form-item 
                v-if="item.type == 'select-tree'"
                style="width: 100%"  
                :label="item.label" 
                :prop="item.prop">
                <treeselect 
                  v-model="form[item.prop]" 
                  :options="infoOptions" 
                  :normalizer="normalizer"
                  placeholder="请选择行政区域" 
                />
              </el-form-item>
              <!-- inputNumber -->
              <el-form-item 
                v-if="item.type == 'inputNumber'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  style="width: 100%" 
                  type="number" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" 
                />
              </el-form-item>
              <!-- textarea -->
              <el-form-item 
                v-if="item.type == 'textarea'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  type="textarea" 
                  :rows="3" 
                  :maxlength="300"
                  :show-word-limit="true"
                  style="width: 100%" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" />
              </el-form-item>
              <!-- image -->
              <el-form-item 
                v-if="item.type == 'upload' && !isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-image style="width: 150px; height: 150px" v-for="ele in form[item.prop]
                  ? JSON.parse(form[item.prop])
                  : []" :key="ele.url" :src="ele.url" fit="fit">
                </el-image>
              </el-form-item>
              <!-- upload
              <el-form-item 
                v-if="item.type == 'upload' && isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-upload 
                  :action="uploadAction" 
                  :headers="uploadHeaders" 
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview" 
                  :on-remove="handleRemove" 
                  accept="image/jpeg,image/gif,image/png"
                  :limit="3" 
                  :file-list="fileLists" 
                  :on-success="(file, fileList) => uploadSuccess(file, fileList, item, index)" 
                  :on-exceed="handleExceed">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible="uploadVisible" @close="() => (uploadVisible = false)">
                  <img width="100%" :src="uploadImageUrl" alt="" />
                </el-dialog>
              </el-form-item> -->
            </el-col>
          </el-row>
        </el-form>
      </div> 
      <div class="dialog-form">
        <p class="title-level2">其他信息</p>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-row>
            <el-col :span="item.span" v-for="(item, index) in formList" :key="index">
              <!-- input -->
              <el-form-item v-if="item.type == 'input'" :label="item.label" :prop="item.prop">
                <el-input 
                  :maxlength="50" 
                  style="width: 100%" 
                  v-model="form[item.prop]"
                  :placeholder="'请输入' + item.label"
                />
              </el-form-item>
              <!-- select -->
              <el-form-item 
                v-if="item.type == 'select'"
                style="width: 100%" 
                :label="item.label" 
                :prop="item.prop">
                <el-select 
                  v-model="form[item.prop]" 
                  :placeholder="'请选择' + item.label"
                  @change="(val) => handleSelChange(val, item)"
                  >
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <!-- select-tree -->
              <el-form-item 
                v-if="item.type == 'select-tree'"
                style="width: 100%"  
                :label="item.label" 
                :prop="item.prop">
                <treeselect 
                  v-model="form[item.prop]" 
                  :options="infoOptions" 
                  :normalizer="normalizer"
                  placeholder="请选择行政区域" 
                />
              </el-form-item>
              <!-- inputNumber -->
              <el-form-item 
                v-if="item.type == 'inputNumber'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  style="width: 100%" 
                  type="number" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" 
                />
              </el-form-item>
              <!-- textarea -->
              <el-form-item 
                v-if="item.type == 'textarea'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  type="textarea" 
                  :rows="3" 
                  :maxlength="300"
                  :show-word-limit="true"
                  style="width: 100%" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" />
              </el-form-item>
              <!-- image -->
              <el-form-item 
                v-if="item.type == 'upload' && !isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-image style="width: 150px; height: 150px" v-for="ele in form[item.prop]
                  ? JSON.parse(form[item.prop])
                  : []" :key="ele.url" :src="ele.url" fit="fit">
                </el-image>
              </el-form-item>
              <!-- upload
              <el-form-item 
                v-if="item.type == 'upload' && isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-upload 
                  :action="uploadAction" 
                  :headers="uploadHeaders" 
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview" 
                  :on-remove="handleRemove" 
                  accept="image/jpeg,image/gif,image/png"
                  :limit="3" 
                  :file-list="fileLists" 
                  :on-success="(file, fileList) => uploadSuccess(file, fileList, item, index)" 
                  :on-exceed="handleExceed">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible="uploadVisible" @close="() => (uploadVisible = false)">
                  <img width="100%" :src="uploadImageUrl" alt="" />
                </el-dialog>
              </el-form-item> -->
            </el-col>
          </el-row>
        </el-form>
      </div> 
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <AddComponent v-if="isEdit" @close="handleAddClose"/>
  </el-card>
</template>
<script>
const defaultQueryParams = {
  pageNum: 1,
  pageSize: 10,
};

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import AddComponent from './add.vue'

export default {
  components: { Treeselect,AddComponent },
  data() {
    return {
      isEdit:false,
      dialogFormVisible:false,
      tableHeight:0,
      queryParams: {
        user: '',
        region: ''
      },
      tableColumns: [
        {
          key: "createTime",
          title: "时间",
        },
        {
          key: "fileCount",
          title: "上传照片数量",
        },
        {
          key: "createTime",
          title: "时间",
        },
        {
          key: "fileCount",
          title: "上传照片数量",
        },
        {
          key: "createTime",
          title: "时间",
        },
        {
          key: "fileCount",
          title: "上传照片数量",
        },
        {
          key: "createTime",
          title: "时间",
        },
        {
          key: "fileCount",
          title: "上传照片数量",
        },
        {
          key: "createTime",
          title: "时间",
        },
        {
          key: "fileCount",
          title: "上传照片数量",
        },
        {
          key: "createTime",
          title: "时间",
        },
        {
          key: "fileCount",
          title: "上传照片数量",
        },
        {
          key: "createBy",
          title: "上传人",
        },
        {
          key: "identifyStatus",
          title: "状态",
        },
        {
          title: "操作",
          align: "center",
          fixed:'right',
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  on: {
                    click: () => {
                    },
                  },
                },
                "详情"
              ),
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  on: {
                    click: () => {
                    },
                  },
                },
                "详情"
              ),
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  on: {
                    click: () => {
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      tableData:[
        {createTime:'2023-10-12',fileCount:10,createBy:'张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        // {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
      ],
      queryParams:{
        ...defaultQueryParams
      },
      total:22,
      // 状态数据字典
      statusOptions: [],
      form:{},
      rules:{},
      formList: [
        {
            label: "塔基名称",
            prop: "name",
            span: 12,
            type: "input",
        },
        {
            label: "位置",
            prop: "position",
            span: 12,
            type: "input",
        },
        {
            label: "行政区域",
            prop: "administrativeArea",
            span: 12,
            type: "select-tree",
        },
        {
            label: "路线",
            prop: "lineId",
            span: 12,
            type: "select",
            selList: [],
        },
        {
            label: "高度(m)",
            prop: "height",
            span: 12,
            type: "input",
        },
        {
            label: "占地面积(m²)",
            prop: "coverArea",
            span: 12,
            type: "input",
        },
        {
            label: "简介",
            prop: "introduce",
            span: 24,
            type: "textarea",
        },
        {
            label: "行政区域",
            prop: "administrativeArea",
            span: 12,
            type: "select-tree",
        },
        {
            label: "路线",
            prop: "lineId",
            span: 12,
            type: "select",
        },
        {
            label: "高度(m)",
            prop: "height",
            span: 12,
            type: "input",
        },
      ],
      infoOptions: [],
      options:[],
    }
  },
  created(){
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
  },
  mounted(){
    this.$nextTick(() => {
      this.getTableHeight();
    })
  },
  methods: {
    handleSearch(){
             
    },
    // 获取页面list
    getLists(){
      
    },
    handleAdd(){
      // this.$router.push('samples/add');
      this.isEdit=true;
    },
    handleAddClose(){
      this.isEdit=false;
    },
    handleAddByDialog(){
      this.dialogFormVisible=true;
    },
    getTableHeight(){
      let height=document.getElementsByClassName('ct-table')[0].clientHeight;
      this.tableHeight= height - 40;
    },
    onSubmit() {
      console.log('submit!');
    },
    handleCurrentChange(val) {
      console.log('val',val)
    },
    handleSelChange(value, item) {
      console.log('value',item);
      this.$forceUpdate();
      this.form[item]=value;
    },
    /** 转换行政区域信息数据结构 */    
    normalizer(node) {
      if (node.children && !node.children.length) {
          delete node.children;
      }
      return {
          id: node.id,
          label: node.name,
          children: node.children,
      };
    },
  }
}
</script>    
<style lang="scss" scoped>

</style>